<template>
  <div class="container animate__animated animate__fadeInLeft">
    <div class="reds-sticky">
      <div class="reds-tab-item active-item">
        <el-badge :value="useChatListStore().privateLetterUnreadCount" :max="99" :show-zero="false" class="item" :offset="[5, 5]" color="#FF3C55">
          <span>私信消息</span>
        </el-badge>
      </div>
      <div class="reds-tab-item">
        <el-badge :value="useChatListStore().commentAndReplyUnreadCount" :max="99" :show-zero="false" class="item" :offset="[5, 5]" color="#FF3C55">
          <span>评论和回复</span>
        </el-badge>
      </div>
      <div class="reds-tab-item">
        <el-badge :value="useChatListStore().newFollowUnreadCount" :max="99" :show-zero="false" class="item" :offset="[5, 5]" color="#FF3C55">
          <span>新增关注</span>
        </el-badge>
      </div>
    </div>
    <!-- 信息列表 -->
    <ChatList></ChatList>
  </div>
</template>

<script setup lang="ts">
import ChatList from '@/components/message/ChatList.vue'
import { useChatListStore } from '@/stores/modules/chatList';
import {  onMounted } from 'vue'
// 获取聊天列表
onMounted(() => {
  useChatListStore().getChatLists()
})

</script>



<style lang="less" scoped>
.animate__animated {
  animation-fill-mode: both;
  animation-duration: 0.5s;
}

.container {
  height: calc(100vh - var(--header-height));
  width: calc(var(--view-width) * 0.88);
  padding: 10px 180px;

  .reds-sticky {
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;

    .reds-tab-item {
      display: flex;
      height: 40px;
      line-height: 40px;
      color: var(--font-color);
      padding: 0 20px;
      border-radius: 20px;
      cursor: pointer;
    }

    .active-item {
      background-color: var(--dark-background-color);
      span{
        font-weight: 600;
      }

    }
  }
}
</style>
